public 폴더의 이미지 사용하기

✒️ 2025-05-28 09:43 내용 수정

참고 자료 : Dava Ceddia's Using the image tag in React, Create React App Using the Public Folder, 룽지's React image 경로 설정하기
위 참고 자료를 들어가면 src 폴더에 이미지를 넣고 Component 파일 등의 js 파일에서 import 하는 방법도 있다.
- 이미지 파일이 매우 많고, 동적으로 경로를 reference 해야 하는 경우에 public 폴더에 저장된 이미지를 사용하는 방법을 추천하고 있다..

import logoImg from 'path/logo.png';

//.. 생략
function Test() {
	return(
		<div>
			<img src={logoImg} alt="로고이미지"/>
		</div>
	)
}

이미지 사용 관련 proxy error 발생

React에서 public에 있는 이미지를 가져오기 위해 아래와 같이 작성했더니 proxy 에러가 발생하면서 CORS 에러가 발생했었다.
- CORS(Cross-Origin Resource Sharing) 참고.

<img src='../../public/img/no_book_image.png' alt='책사진'/>

img error.png

이로 인해 CORS 관련 해결법을 찾아봤지만 proxy 설정을 이미 진행했기 때문에 이 부분의 문제가 아닌 것 같았다.
이미지를 public 폴더로부터 가져올 때 설정의 문제가 있는 것 같아 "React에서 이미지 가져오기" 키워드로 검색했고, 관련 내용으로 이미지 경로 설정을 바꿨더니 오류가 해결되었다.

먼저 public 폴더의 하위 폴더로 img 폴더를 생성한다.
- 서버는 public 폴더를 root 디렉터리 (/)로 취급하여 이의 상대 경로로 파일의 경로를 인식한다.
- http://localhost:3000/img/filename.jpg와 같이 인식한다.

이미지를 사용할 Component.js 파일에서 <img> 태그를 사용하여 이미지를 불러온다.
- 이 때 src를 서버 배포를 고려하여 process.env.PUBLIC_URL로 설정해두면 서버에 요청 시 도메인/img/이미지파일이름 으로 요청한다.

<img src={process.env.PUBLIC_URL + '/img/no_book_image.png'} alt='책사진'/>

img 2.png